<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline" >
      <el-form-item label="分公司">
        <el-select v-model="formInline.branchId" v-if="isBranch" style="width: 180px" @change="getDeptList" @visible-change="visibleChange" filterable>
          <el-option
            v-for="item in branchList"
            :label="item.branch_Name"
            :value="item.branch_Id">
          </el-option>
        </el-select>
        <el-input v-else v-model="branchName" disabled></el-input>
      </el-form-item>
      <el-form-item label="所属部门">
        <el-select v-model="formInline.departmentId" v-if="isBranch" style="width: 180px" filterable>
          <el-option
            v-for="item in deptList"
            :value="item.org_id"
            :label="item.org_name">
          </el-option>
        </el-select>
        <el-input v-if="!isBranch" v-model="orgName" disabled></el-input>
      </el-form-item>
      <!--<el-form-item label="分公司">-->
        <!--<el-input v-model="this.branchName" disabled></el-input>-->
      <!--</el-form-item>-->
      <!--<el-form-item label="所属部门">-->
        <!--<el-input v-model="this.orgName" disabled></el-input>-->
      <!--</el-form-item>-->
      <el-form-item label="活动类型">
        <el-select v-model="formInline.activityType" clearable @change="typeChange">
          <el-option label="定投活动" value="10"></el-option>
          <el-option label="兑换码活动" value="11"></el-option>
          <el-option label="注册返券活动" value="12"></el-option>
          <el-option label="满返活动" value="13"></el-option>
          <el-option label="领券中心" value="14"></el-option>
          <el-option label="多订多得活动" value="15"></el-option>
          <el-option label="充值返券" value="16"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择时间" v-if="formInline.activityType !== '10'">
        <el-date-picker
          :editable="false"
          v-model="formInline.time"
          type="daterange"
          value-format="yyyy-MM-dd"
          @change="timeChange"
          placeholder="选择周期范围">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="发放时间" v-else>
        <el-date-picker
          v-model="formInline.time"
          type="date"
          @change="timeChange2"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="审核状态">
        <el-select v-model="formInline.state" @change="stateChange" filterable clearable>
          <el-option label="全部" value="66"></el-option>
          <el-option label="已审核" value="77"></el-option>
          <el-option label="审核中" value="88"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="活动ID">
        <el-input v-model="formInline.id"></el-input>
      </el-form-item>
      <el-form-item label="活动名称">
        <el-input v-model="formInline.batchName"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-for="(item, index) in initail"
      v-if="index === show"
      style="width: 100%"
      v-loading="isLoading"
      :data="tableData"
      @select-all="handleSelectionChange"
      @selection-change="handleChange"
      border>
      <el-table-column
        align="center"
        fixed
        type="selection"
        :selectable="isCheck"
        width="50">
      </el-table-column>
      <el-table-column v-for="(col, index) in item" :prop="col.prop" align="center" :label="col.label" show-overflow-tooltip :width="col.width" :key="index">
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="180">
        <template scope="scope">
          <el-button v-if="" @click="handle(scope.$index, scope.row, $event)" size="small">详情</el-button>
          <el-button v-if="(scope.row.state === '审核中' && scope.row.isCheck === 'true') || (scope.row.state === '待审核' && scope.row.isCheck === 'true')" @click="handle(scope.$index, scope.row, $event)" size="small">审核</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="float: left; margin-top: 10px">
      <el-button type="primary" @click="lotCheck">批量审核</el-button>
    </div>
    <!--分页-->
    <el-pagination
      @current-change="handleCurrentChange"
      :page-size="Number(pageData.pageSize)"
      layout="total, prev, pager, next"
      :total="Number(total)"
      style="padding-top:10px;text-align: right;">
    </el-pagination>
    <!--审核弹窗-->
    <el-dialog
      title="审核信息"
      size="tiny"
      :visible.sync="dialogCheck">
      <p></p>
      <span>审核状态：</span>
      <template>
        <el-radio class="radio" v-model="radio" label="1">审核通过</el-radio>
        <el-radio class="radio" v-model="radio" label="2">不通过</el-radio>
      </template>
      <el-input style="margin-top: 20px" v-model="noReason" placeholder="请输入审核意见"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogCheck = false">关 闭</el-button>
        <el-button type="primary" @click="makeCheck">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import { activity, getInfo } from '../../../../config/proxy.js'
  import { mapState } from 'vuex'
  import mixins from '../../../../components/mixins.vue'
  export default {
    mixins: [mixins],
    data () {
      return {
        show: 0,
        name: '',
        changeName: '',
        initail: [
          [
            {prop: 'branchName', label: '分公司', width: '150'},
            {prop: 'departName', label: '所属部门', width: '150'},
            {prop: 'activityName', label: '活动类型', width: '150'},
            {prop: 'id', label: '活动ID'},
            {prop: 'batchName', label: '活动名称', width: '150px'},
            {prop: 'sendTime', label: '发放时间', width: '200px'},
            {prop: 'createBy', label: '申请人', width: '100'},
            {prop: 'remark', label: '备注', width: '150'},
            {prop: 'createTime', label: '申请时间', width: '200'},
            {prop: 'agreeTime', label: '审核完成时间', width: '200'},
            {prop: 'state', label: '活动状态', width: '100'}
          ],
          [
            {prop: 'branchName', label: '分公司', width: '150'},
            {prop: 'deptName', label: '所属部门', width: '150'},
            {prop: 'activityName', label: '活动类型', width: '150'},
            {prop: 'id', label: '活动ID', width: '80'},
            {prop: 'pcname', label: '活动名称', width: '150'},
            {prop: 'expirationDate', label: '截至日期', width: '200'},
            {prop: 'createUser', label: '申请人', width: '100'},
            {prop: 'remark', label: '备注', width: '150'},
            {prop: 'createTime', label: '申请时间', width: '200'},
            {prop: 'auditTime', label: '审核完成时间', width: '200'},
            {prop: 'stateName', label: '活动状态', width: '100'}
          ],
          [
            {prop: 'branchName', label: '分公司', width: '150'},
            {prop: 'deptName', label: '所属部门', width: '150'},
            {prop: 'activityName', label: '活动类型', width: '150'},
            {prop: 'id', label: '活动ID', width: '80'},
            {prop: 'pcname', label: '活动名称', width: '150'},
            {prop: 'startDate', label: '开始日期', width: '200'},
            {prop: 'overDate', label: '结束日期', width: '200'},
            {prop: 'createUser', label: '申请人', width: '100'},
            {prop: 'remark', label: '备注', width: '150'},
            {prop: 'createTime', label: '申请时间', width: '200'},
            {prop: 'auditTime', label: '审核完成时间', width: '200'},
            {prop: 'stateName', label: '活动状态', width: '100'}
          ],
          [
            {prop: 'branchName', label: '分公司', width: '150'},
            {prop: 'departName', label: '所属部门', width: '150'},
            {prop: 'activityName', label: '活动类型', width: '150'},
            {prop: 'id', label: '活动ID', width: '80'},
            {prop: 'batchName', label: '活动名称', width: '150'},
            {prop: 'startTime', label: '开始日期', width: '200'},
            {prop: 'endTime', label: '结束日期', width: '200'},
            {prop: 'createBy', label: '申请人', width: '100'},
            {prop: 'remark', label: '备注', width: '150'},
            {prop: 'createTime', label: '申请时间', width: '200'},
            {prop: 'agreeTime', label: '审核完成时间', width: '200'},
            {prop: 'state', label: '活动状态', width: '100'}
          ],
          [
            {prop: 'branchName', label: '分公司', width: '150'},
            {prop: 'departName', label: '所属部门', width: '150'},
            {prop: 'activityName', label: '活动类型', width: '150'},
            {prop: 'id', label: '活动ID', width: '80'},
            {prop: 'batchName', label: '活动名称', width: '150'},
            {prop: 'startTime', label: '开始日期', width: '200'},
            {prop: 'endTime', label: '结束日期', width: '200'},
            {prop: 'createBy', label: '申请人', width: '100'},
            {prop: 'remark', label: '备注', width: '150'},
            {prop: 'createTime', label: '申请时间', width: '200'},
            {prop: 'agreeTime', label: '审核完成时间', width: '200'},
            {prop: 'state', label: '活动状态', width: '100'}
          ],
          [
            {prop: 'branchName', label: '分公司', width: '150'},
            {prop: 'departName', label: '所属部门', width: '150'},
            {prop: 'activityName', label: '活动类型', width: '150'},
            {prop: 'id', label: '活动ID', width: '80'},
            {prop: 'batchName', label: '活动名称', width: '150'},
            {prop: 'startTime', label: '开始日期', width: '200'},
            {prop: 'endTime', label: '结束日期', width: '200'},
            {prop: 'createBy', label: '申请人', width: '100'},
            {prop: 'remark', label: '备注', width: '150'},
            {prop: 'createTime', label: '申请时间', width: '200'},
            {prop: 'agreeTime', label: '审核完成时间', width: '200'},
            {prop: 'state', label: '活动状态', width: '100'}
          ],
          [
            {prop: 'branchName', label: '分公司', width: '150'},
            {prop: 'deptName', label: '所属部门', width: '150'},
            {prop: 'activityName', label: '活动类型', width: '150'},
            {prop: 'id', label: '活动ID', width: '80'},
            {prop: 'name', label: '活动名称', width: '150'},
            {prop: 'startTime', label: '开始日期', width: '200'},
            {prop: 'endTime', label: '结束日期', width: '200'},
            {prop: 'applyName', label: '申请人', width: '100'},
            {prop: 'description', label: '备注', width: '150'},
            {prop: 'createTime', label: '申请时间', width: '200'},
            {prop: 'auditTime', label: '审核完成时间', width: '200'},
            {prop: 'state', label: '活动状态', width: '100'}
          ]
        ],
        deptList: [],
        visible: false,
        formInline: {
          activityType: '',
          batchName: '',
          branchId: '',
          departmentId: '',
          id: '',
          time: '',
          state: '',
          startTime: '',
          endTime: '',
          sendTime: ''
        },
        tableData: [],
        isLoading: false,
        pageData: {
          pageSize: 10,
          page: 1
        },
        total: '',
        all: '',
//      审核弹窗
        row: '',
        dialogCheck: false,
        radio: '1',
        noReason: '',
        button: false
      }
    },
    methods: {
      stateChange () {
        this.pageData.page = 1
      },
      getDeptList (val) {
        if (this.visible === true) {
          this.formInline.departmentId = ''
        }
        var _data = {}
        this.branchList.forEach(item => {
          if (val === item.branch_Id) {
            _data.orgId = item.org_id
            this.formInline.newBranchId = item.org_id
          }
        })
        getInfo.department(_data, (res) => {
          if (res.message === 'ok') {
            if (val === 1) {
              this.deptList = []
              res.content.forEach(element => {
                if (element.org_name.indexOf('公司') === -1) {
                  this.deptList.push(element)
                }
              })
              this.matchDept()
            } else {
              this.deptList = res.content
              this.matchDept()
            }
          } else {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'error'
            })
          }
        })
      },  // 获取部门
      matchDept () { // 匹配 当前登录人的部门与部门列表
        for (let index = 0; index < this.deptList.length; index++) {
          const element = this.deptList[index]
          if (Number(this.formInline.departmentId) === Number(element.org_id)) {
            return
          } else {
            if (index === this.deptList.length - 1) {
              this.formInline.departmentId = ''
            }
          }
        }
      },
      visibleChange (val) {
        this.visible = val
      },
      typeChange (val) {
        this.pageData.page = 1
//        this.tableData = []
        switch (val) {
          case '10':
            this.show = 0
            break
          case '11':
            this.show = 1
            break
          case '12':
            this.show = 2
//            this.name = this.zcfq
            break
          case '13':
            this.show = 3
//            this.name = this.mfhd
            break
          case '14':
            this.show = 4
//            this.name = this.lqzx
            break
          case '15':
            this.show = 5
//            this.name = this.dddd
            break
          case '16':
            this.show = 6
//            this.name = this.czfq
            break
        }
      },
      refreshChange (val) {
        switch (val) {
          case 10 :
            return 'dtState'
          case 11:
            return 'dhmState'
          case 12:
            return 'zcfqState'
          case 13:
            return 'mfState'
          case 14:
            return 'lqzxState'
          case 15:
            return 'ddddState'
          case 16:
            return 'czfqState'
        }
      },
      timeChange (val) {
        if (val) {
          this.formInline.startTime = val[0]
          this.formInline.endTime = val[1]
        } else {
          this.formInline.startTime = ''
          this.formInline.endTime = ''
        }
      },
      timeChange2 (val) {
        this.formInline.sendTime = val
      },
      matchState (res) {
        if (res) {
          for (var i = 0; i < res.length; i++) {
            if (res[i].state === 1) { res[i].state = '草稿' }
            if (res[i].state === 2) { res[i].state = '待审核' }
            if (res[i].state === 3) { res[i].state = '审核中' }
            if (res[i].state === 4) { res[i].state = '审核不通过' }
            if (res[i].state === 5) { res[i].state = '未开始' }
//            if (res[i].state === 5 && res[i].activityType === 16) { res[i].state = '进行中' }
//            if (res[i].state === 6 && res[i].activityType === 16) { res[i].state = '执行失败' }
            if (res[i].state === 6) { res[i].state = '进行中' }
            if (res[i].state === 7) { res[i].state = '已结束' }
            if (res[i].state === 8) { res[i].state = '已失效' }
            if (res[i].state === 9) { res[i].state = '发放中' }
            if (res[i].state === 10) { res[i].state = '发放失败' }
            if (res[i].state === 11) { res[i].state = '未发放' }
            if (res[i].state === 12) { res[i].state = '已发放' }
            if (res[i].state === 99) { res[i].state = '已作废' }
            if (res[i].activityType === 10) { res[i].activityName = '定投' }
            if (res[i].activityType === 11) { res[i].activityName = '兑换码' }
            if (res[i].activityType === 12) { res[i].activityName = '注册返券' }
            if (res[i].activityType === 13) { res[i].activityName = '满返' }
            if (res[i].activityType === 14) { res[i].activityName = '领券中心' }
            if (res[i].activityType === 15) { res[i].activityName = '多订多得' }
            if (res[i].activityType === 16) { res[i].activityName = '充值返券' }
            if (Number(res[i].gwId) === Number(this.roleId) || Number(res[i].gwId) === Number(this.orId)) { res[i].isCheck = 'true' }
          }
        }
      },
      onSubmit () {
        if (this.formInline.activityType === '') {
          this.$message({
            showClose: true,
            message: '请先选择活动类型',
            type: 'error'
          })
          return false
        }
        this.isLoading = true
        var _data = Object.assign(this.formInline, this.pageData)
        activity.hdsh.yhqhdsh.list(_data, (res) => {
          console.log(res, 'aa')
          if (res.message === 'ok') {
            this.tableData = res.content.content || res.content.list.map(item => { if (item.status) { item.state = item.status } return item })
            if (this.formInline.activityType === '16') {
              console.log('充值返券')
              this.tableData.map(item => {
                item.state = item.statusName
                item.activityName = '充值返券'
                if (Number(item.gwId) === Number(this.roleId) || Number(item.gwId) === Number(this.orId)) { item.isCheck = 'true' }
                return item
              })
            } else {
              this.matchState(this.tableData)
            }
            this.total = res.content.count
            this.isLoading = false
          } else {
            this.$message({
              showClose: true,
              message: '查询失败',
              type: 'error'
            })
          }
        })
      },
      handleCurrentChange (val) {
        this.pageData.page = val
        this.onSubmit()
      },
      handle (index, row, event) {
        const handleName = event.target.innerText
        switch (handleName) {
          case '审核':
            this.row = row
            this.button = true
            this.noReason === ''
            this.dialogCheck = true
            break
          case '详情':
            var result = this.checkDetail(Number(row.activityType))
            let _data = {
              menu_id: row.id + '1',
              menu_name: row.activityName + '详情',
              per_controller: result,
              uid: row.id
            }
            this.$store.dispatch('addTab', _data)
            break
        }
      },
      makeCheck () {
        if (this.radio === '2' && this.noReason === '') {
          this.$message({
            showClose: true,
            message: '请您输入审核意见',
            type: 'warning'
          })
          return false
        }
        var checkArr = []
        if (!this.button) {
          console.log(this.all)
          this.all.forEach((item, index) => {
            const newItem = {
              tid: item.activityType,
              aid: item.id,
              gwId: Number(item.gwId) === this.roleId ? this.roleId : this.orId
            }
            checkArr.push(newItem)
          })
          this.changeName = this.refreshChange(checkArr[0].tid)
        } else {
          const newItem = {
            tid: this.row.activityType,
            aid: this.row.id,
            gwId: Number(this.row.gwId) === this.roleId ? this.roleId : this.orId
          }
          this.changeName = this.refreshChange(this.row.activityType)
          checkArr.push(newItem)
        }
        const _data = {
          branchId: this.branchId,
          newBranchId: this.bid,
          opinion: this.noReason,
          result: Number(this.radio),
          userId: this.userId,
          userName: this.userName,
          activityInfo: checkArr
        }
        console.log(_data)
        activity.hdsh.yhqhdsh.check(_data, res => {
          this.dialogCheck = false
          if (res.message === 'ok') {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'success'
            })
            this.onSubmit()
            this.$store.dispatch(this.changeName, this.$store.state.updateState[this.changeName] + 1)
          } else {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'error'
            })
          }
        })
      },
      checkDetail (type) {
        switch (type) {
          case 10:
            return 'dtgl_detail'
          case 13:
            return 'mfgl_detail'
          case 11:
            return 'dhm_detail'
          case 12:
            return 'zcfq_detail'
          case 14:
            return 'lqzx_detail'
          case 15:
            return 'dddd_detail'
          case 16:
            return 'czfq_detail'
        }
      },
      isCheck (row, index) {
        return (row.state === '待审核' && row.isCheck === 'true') || (row.state === '审核中' && row.isCheck === 'true')
      },
      handleChange (all) {
        this.all = all
      },
      handleSelectionChange (all) {
        this.all = all
      },
      lotCheck () {
        if (this.all.length !== 0) {
          this.dialogCheck = true
        } else {
          this.$message({
            showClose: true,
            message: '请勾选您要批量审核的数据',
            type: 'warning'
          })
        }
      }
    },
    computed: mapState({
      userName: function (state) {
        return state.user.info.user_name
      },
      userId: function (state) {
        return state.user.info.user_id
      },
      orgName: function (state) {
        return state.user.info.parOrgName
      },
      orgId: function (state) {
        return state.user.info.or_org_id
      },
      roleId: function (state) {
        return Number(state.user.info.roleid)
      },
      orId: function (state) {
        return Number(state.user.info.or_id)
      },
      branchName: function (state) {
        return state.user.info.branchId === 1 ? '总公司' : state.user.info.branchName
      },
      branchId: function (state) {
        return state.user.info.branchId
      },
      bid: function (state) {
        return state.user.info.branchOrgId
      }
    }),
    created () {
      this.formInline.branchId = this.branchId
      this.formInline.departmentId = this.orgId
      this.formInline.newBranchId = this.bid
      this.formInline.gwId = this.roleId
      console.log(this.roleId)
      console.log(this.orgId)
    },
    watch: {
      branchList (a, b) {
        this.getDeptList(this.formInline.branchId)
      }
    }
  }
</script>
<style>
</style>
